<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			@keyframes dfc{
				0%{
					transform:rotate(180deg);
				}
				30%{
					transform:rotate(360deg);
				}
				100%{
					transform:rotate(720deg);
				}
			}
			.imga{
				animation:dfc.8s linear infinite;
			}
			@keyframes dfc1{
				0%{
					transform:rotateY(180deg) scale(1);
				}
				30%{
					transform:rotateY(360deg) scale(1);
				}
				100%{
					transform:rotateY(720deg) scale(1);
				}
			}
			.imgb{
				animation:dfc1.8s linear infinite;
			}
		</style>
	</head>
	<body>
		<img src="img/灰太狼_爱给网_aigei_com.png" alt="大风车" />
		<audio src="./img/dafengche.mp3" autoplay></audio>
		<button id="btn1">开始转</button>
		<button id="btn2">停止转</button>
		<button id="btn3">翻转</button>
		<script>
			/* jq 页面图片改变 而且 旋转 */
			$("#btn1").click(function(){
				//元素  上属性  元素可以加类名
				$("img").attr("src","img/dfc.jpg").addClass("imga");
			});
			//暂停
			$("#btn2").click(function(){
				$("img").attr("src","img/dfc.jpg").removeClass("imga");
				$("audio").removeAttr("src");
			});
			//翻转：Y轴翻转 缩放  类样式.imgb
			$("#btn3").click(function(){
			$("img").attr("src","img/dfc.jpg").toggleClass("imgb");
			$("audio").attr("src","./img/dafengche.mp3");
			});
		</script>
	</body>
</html>